<template>
  <div class="sys-container clearfix">
    <div class="sys-title">主题分类:</div>
    <div class="sys-main">
      <tree-select
        :options="systemList"
        :normalizer="myTreeSet"
        :default-expand-level="1"
        placeholder="请选择主题分类"
        clearValueText
        v-model="selectVal"
        @select="handleOrgTree"
      />
    </div>
  </div>
</template>
<script>
import TreeSelect from "@riophae/vue-treeselect";
// import the styles
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: {
    TreeSelect
  },
  props: {
    treeData: Array
  },
  data() {
    return {
      selectVal: "",
      systemList: [
        {
          id: "",
          label: "全部",
          code: "",
          children: []
        }
      ],
      myTreeSet(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.label,
          children: node.children
        };
      }
    };
  },
  mounted() {
    this.$emit("select", this.systemList[0]);
  },
  watch: {
    selectVal(val) {
      if (val == undefined || val == "") {
        this.selectVal = "";
        this.$emit("select", this.systemList[0]);
      }
    },
    treeData: {
      handler(val) {
        this.$set(this.systemList[0], "children", val);
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    handleOrgTree(val) {
      this.$emit("select", val);
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.sys-container {
  .sys-title {
    float: left;
    padding-right: 16px;
    height: 35px;
    line-height: 35px;
  }
  .sys-main {
    float: left;
    width: 300px;
  }
}
.sys-container /deep/ .vue-treeselect__control {
  border-radius: 0;
}
</style>
